<template>
	<div class="order-list" v-loading="loading">
		<div class="header">
			<div>产品</div>
			<div>客户名称</div>
			<div>状态</div>
			<div>金额</div>
		</div>

		<div class="page-btns">
			<el-button size="mini" @click="prevPage" :disabled="page === 1"
				>上一页</el-button
			>
			<el-button size="mini" @click="nextPage" :disabled="page === totalPage"
				>下一页</el-button
			>
		</div>

		<div
			class="order"
			v-for="order in list"
			:key="order.businessId"
			@click="toInsure(order)"
		>
			<div class="title">
				<span>{{ order.createTime || '--' }}</span>
				<span style="float: right">订单编号: {{ order.num || '--' }}</span>
			</div>
			<div class="cell product">
				<img class="product__poster" :src="order.productImg" alt="" />
				<div class="product__content">
					<div class="product__content__name">{{ order.productName }}</div>
					<!-- <div class="product__content__info"></div> -->
				</div>
			</div>
			<div class="cell">{{ order.customerName }}</div>
			<div class="cell text-center">{{ order.statusStr || '--' }}</div>
			<div class="cell text-center">{{ order.money || '--' }}</div>
		</div>
		<div style="text-align: right">
			<el-pagination
				small
				:current-page.sync="page"
				layout="sizes, prev, pager, next"
				:page-sizes="[1, 10, 15, 30]"
				:page-size="limit"
				:total="totalRow"
				@size-change="onSizeChange"
				@current-change="onPageChange"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
import { queryList } from '@/api/order'
import { StepRoutesMap } from '@/views/layout/InsureLayout.vue'
export default {
	data() {
		return {
			page: 1,
			limit: 10,
			totalRow: 0,
			totalPage: 0,

			list: [],
			loading: false
		}
	},
	computed: {},
	mounted() {
		this.queryList()
	},
	methods: {
		queryList() {
			this.loading = true
			queryList({
				page: this.page,
				limit: this.limit
			})
				.then((res) => {
					this.list = res.data.list
					this.totalRow = res.data.totalRow
					this.totalPage = res.data.totalPage
				})
				.finally(() => {
					this.loading = false
				})
		},

		prevPage() {
			this.page--
			this.queryList()
		},
		nextPage() {
			this.page++
			this.queryList()
		},
		onSizeChange(size) {
			this.limit = size
			this.queryList()
		},
		onPageChange(page) {
			this.page = page
			this.queryList()
		},

		toInsure(order) {
			const name = StepRoutesMap.get(order.step)
			this.$router.push({
				name,
				query: {
					businessId: order.businessId,
					productId: order.productId,
					docUrl: order.documentFile
				}
			})
		}
	},
	components: {}
}
</script>

<style lang="scss" scoped="scoped">
// 列的整体结构
$grid-template-columns-default: 1fr 200px 120px 100px;

.text-center {
	text-align: center;
}

.order-list {
	max-width: 900px;
	margin: 20px auto;
	font-size: 13px;
	color: #3c3c3c;

	.header {
		display: grid;
		grid-template-columns: $grid-template-columns-default;
		background: #f5f5f5;
		border: 1px solid #e8e8e8;
		line-height: 39px;
		text-align: center;
	}
}
.page-btns {
	padding: 10px 0;
	text-align: right;
}
.order {
	margin-bottom: 10px;
	display: grid;
	grid-template-columns: $grid-template-columns-default;
	border-top: 1px solid #e8e8e8;
	border-left: 1px solid #e8e8e8;
	> * {
		border-right: 1px solid #e8e8e8;
		border-bottom: 1px solid #e8e8e8;
	}
	.cell {
		padding: 15px;
	}

	.title {
		line-height: 39px;
		background: #f5f5f5;
		padding: 0 15px;
		grid-column: -1 / 1;
	}

	.product {
		overflow: hidden;
		&__poster {
			width: 80px;
			height: 80px;
			float: left;
			margin-right: 8px;
		}

		&__content {
			overflow: hidden;
		}
	}
}
</style>
